//  定义路由表
import loginVue from "@/views/login.vue";
import { createRouter, createWebHistory } from "vue-router";
import VueCookies from "vue-cookies";
import QqLoginCallbackVue from "@/views/qqLoginCallback.vue";
import layoutFilledVue from "@/views/layoutFilled.vue";
// 加上meta可在页面跳转时，在route中带上meta参数
const routes = [
  {
    path: "/login",
    name: "login",
    meta: { title: "登录" },
    component: loginVue,
  },
  {
    path: "/",
    name: "home",
    meta: { title: "主页" },
    component: layoutFilledVue,
    redirect: "/index",
    children: [
      {
        path: "/index",
        name: "首页",
        meta: { title: "首页" },
        component: () => import("@/views/index.vue"),
      },
      {
        path: "/user",
        name: "用户",
        meta: { title: "用户管理" },
        redirect: "/user",
        children: [
          {
            path: "/user",
            name: "用户信息",
            meta: { title: "用户信息" },
            component: () => import("@/views/user/index.vue"),
          },
        ],
      },
      {
        path: "/page",
        name: "页面管理",
        meta: { title: "页面管理" },
        redirect: "/page/home/banner",
        children: [
          {
            path: "/page/home/total",
            name: "图片数据",
            meta: { title: "图片数据" },
            component: () => import("@/views/page/home/total.vue"),
          },
          {
            path: "/page/home/banner",
            name: "首页轮播图",
            meta: { title: "轮播图" },
            component: () => import("@/views/page/home/banner.vue"),
          },
          {
            path: "/page/home/notice",
            name: "公告栏数据",
            meta: { title: "公告栏数据" },
            component: () => import("@/views/page/home/notice.vue"),
          },
          {
            path: "/page/home/topic",
            name: "专题精选",
            meta: { title: "专题精选" },
            component: () => import("@/views/page/home/topic.vue"),
          },
          {
            path: "/page/classify",
            name: "分类",
            meta: { title: "分类" },
            component: () => import("@/views/page/classify/index.vue"),
          },
          {
            path: "/material/upload",
            name: "素材上传记录",
            meta: { title: "素材上传记录" },
            component: () => import("@/views/material/uploadHistory.vue"),
          },
        ],
      },
      {
        path: "/material",
        name: "素材管理",
        meta: { title: "素材管理" },
        redirect: "/material/list",
        children: [
          {
            path: "/material/check",
            name: "素材审核",
            meta: { title: "素材审核" },
            component: () => import("@/views/material/check.vue"),
          },
          {
            path: "/material/list",
            name: "素材信息",
            meta: { title: "素材信息" },
            component: () => import("@/views/material/index.vue"),
          },
        ],
      },
    ],
  },
  {
    path: "/qqlogincallback",
    name: "QQ登录回调",
    component: QqLoginCallbackVue,
  },
  {
    path: "/navbar",
    name: "顶栏",
    component: () => import("@/components/Navbar.vue"),
  },
  {
    path: "/avatar",
    name: "头像",
    component: () => import("@/components/Avatar.vue"),
  },

  {
    path: "/updateAvatar",
    name: "修改头像",
    component: () => import("@/components/UpdateAvatar/UpdateAvatar.vue"),
  },
  // 测试用：
  // 1. ImagePreview
  {
    path: "/imagePreview",
    component: () => import("@/components/ImagePreview/index.vue"),
  },
  {},
];

//   创建路由器
const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

// 全局路由守卫 拦截
router.beforeEach((to, from, next) => {
  //  to：前往的页面地址  from：离开的页面地址
  console.log("路由信息：", to, from);

  // 对路由的鉴权  判断是否需要登录
  const userInfo = VueCookies.get("userInfo");
  if (to.meta.needLogin != null && to.meta.needLogin && userInfo == null) {
    next({ path: "/login" });
    return;
  }
  document.title = to.meta.title || "素材";
  // 用户离开页面时，title集合
  // const leaveTitleList = [
  //   "不要离开T^T",
  //   "记得回来哈！",
  //   "快回来，别走！",
  //   "补药走啊！！！",
  // ];
  // window.onblur = function () {
  //   const randomIndex = Math.floor(Math.random() * leaveTitleList.length);
  //   document.title = leaveTitleList[randomIndex];
  // };
  // 用户返回页面时，title集合
  // const returnTitleList = ["欢迎回来^-^", "Welcome back!", "你来了！"];
  // window.onfocus = function () {
  //   const randomIndex = Math.floor(Math.random() * returnTitleList.length);
  //   document.title = returnTitleList[randomIndex];
  // };
  // 判断用户是否登录，未登录则返回登录页
  // if()
  next();
});

//   导出路由器
export default router;

//    Vue实例使用路由器
